<template>
  <section class="copyright-services">
    <div class="content">
      <h2 class="title">全方位版权服务</h2>
    </div>

    <div class="services-list">
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-box">
          <h3 class="service-title">
            <img :src="service.icon" :alt="service.title" />
            <span>{{ service.title }}</span>
          </h3>

          <template v-for="(group, groupIndex) in service.groups" :key="groupIndex">
            <p class="service-group-title">{{ group.title }}</p>
            <p class="service-links">
              <span 
                v-for="(link, linkIndex) in group.links" 
                :key="linkIndex"
                @click="handleClick(link)"
              >
                {{ link.text }}
              </span>
            </p>
          </template>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'CopyrightServices',

  setup() {
    const router = useRouter()

    const services = [
      {
        icon: new URL('@/assets/homeimg/sec2Icon1.png', import.meta.url).href,
        title: '版权登记',
        groups: [
          {
            title: '版权存证',
            links: [
              { text: '区块链存证', path: '/copyrightRegistration/evidence' }
            ]
          },
          {
            title: '版权登记',
            links: [
              { text: '作品著作权登记', path: '/copyright-registration' },
              { text: '软件著作权登记', path: '/app-copyright-registration' }
            ]
          }
        ]
      },
      {
        icon: new URL('@/assets/homeimg/sec2Icon2.png', import.meta.url).href,
        title: '版权市场',
        groups: [
          {
            title: '版权市场',
            links: [
            { text: '川文数服', url: 'https://www.sccdex.com/' },
            { text: '华东文化大数据', url: 'http://cde.jscaee.com.cn/html/home.html' },
            { text: '光厂', url: 'https://www.vjshi.com/profile/2462999.html' }
            ]
          }
        ]
      },
      {
        icon: new URL('@/assets/homeimg/sec2Icon3.png', import.meta.url).href,
        title: '芝麻AI',
        groups: [
          {
            title: '法律服务',
            links: [
              { text: '法律咨询', path: '/online/index' },
              { text: '维权诉讼', path: '/online/index' }
            ]
          },
          {
            title: '监测取证',
            links: [
              { text: '传播监测', path: '/monitoring/index' },
              { text: '电子取证', path: '/electronic/index' }
            ]
          }
        ]
      },
      {
        icon: new URL('@/assets/homeimg/sec2Icon4.png', import.meta.url).href,
        title: '解决方案',
        groups: [
          {
            title: '版权检索',
            links: [
              { text: '版权查询', path: '/copyrightMarket/page/index/' },
              { text: '区块链浏览器', url: 'http://wcl.btsi.org.cn/' }
            ]
          }
        ]
      }
    ]

    const handleClick = (link) => {
      if (link.url) {
        window.open(link.url)
      } else if (link.path) {
        router.push(link.path)
      }
    }

    return {
      services,
      handleClick
    }
  }
})
</script>

<style lang="scss" scoped>
.copyright-services {
  width: 1200px;
  margin: 60px auto;
  
  .content {
    text-align: center;
    margin-bottom: 30px;
    
    .title {
      font-size: 32px;
      color: #333;
      font-weight: 600;
      position: relative;
      display: inline-block;
      padding-bottom: 15px;
      
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #1890ff, #53b7d7);
      }
    }
  }

  .services-list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .service-item {
      margin: 20px 0;

      .service-box {
        width: 220px;
        min-height: 180px;
        padding: 30px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        border-radius: 15px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
          border-bottom: 3px solid #53b7d7;
        }

        .service-title {
          color: #333;
          line-height: 33px;
          height: 33px;
          font-size: 20px;
          margin-top: 0;
          margin-bottom: 25px;
          overflow: hidden;
          display: flex;
          align-items: center;

          img {
            width: 22px;
            margin-right: 12px;
            transition: transform 0.3s ease;
          }

          span {
            font-weight: 600;
          }
        }

        &:hover .service-title img {
          transform: scale(1.15);
        }

        .service-group-title {
          color: #333;
          line-height: 22px;
          font-size: 17px;
          font-weight: 500;
          margin-top: 22px;
          margin-bottom: 10px;
        }

        .service-links {
          font-size: 14px;
          color: #666;
          line-height: 22px;
          display: flex;
          flex-wrap: wrap;
          margin-top: 8px;

          span {
            margin-right: 15px;
            cursor: pointer;
            position: relative;
            padding-bottom: 2px;
            margin-bottom: 6px;
            
            &:hover {
              color: #53b7d7;
            }
            
            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 0;
              height: 1px;
              background-color: #53b7d7;
              transition: width 0.3s ease;
            }
            
            &:hover:after {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1220px) {
  .copyright-services {
    width: 90%;
    
    .services-list {
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      
      .service-item {
        margin: 15px;
      }
    }
  }
}
</style> 